<template>
  <div>
    <el-card class="box-card">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="roleName" placeholder="用户名" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="QueryRole"
            >查询</el-button
          >
          <el-button>清空</el-button>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="addRole" v-permission="'btn.Role.add'"
        >添加</el-button
      >
      <el-button type="danger" v-permission="'btn.Role.remove'"
        >批量删除</el-button
      >
      <el-table :data="tableData" border style="width: 100%" class="User-table">
        <el-table-column type="selection" width="60" />
        <el-table-column type="index" label="序号" width="100" align="center" />
        <el-table-column prop="roleName" label="角色名称" width="180" />
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button
              size="small"
              type="info"
              :icon="InfoFilled"
              @click="goRoleAuth(row)"
              v-permission="'btn.Role.assgin'"
            />
            <el-button
              size="small"
              type="primary"
              :icon="Check"
              v-permission="'btn.Role.update'"
            />
            <el-button
              size="small"
              type="warning"
              :icon="Edit"
              v-permission="'btn.Role.remove'"
            />
            <el-button size="small" type="danger" :icon="Delete" />
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:currentPage="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 15, 20]"
        :small="true"
        layout=" prev, pager, next, jumper,  ->, sizes, total"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />

      <!--           :model="roleFormData"
          :rules="roleFormRules" -->
      <el-dialog v-model="DistributeVisible" title="添加角色">
        <el-form
          label-width="100px"
          ref="ruleFormRef"
          :model="roleFormData"
          :rules="rules"
        >
          <el-form-item label="请输入新名称" prop="roleName" class="RoleName">
            <el-input v-model="roleFormData.roleName" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="DistributeVisible = false">取消</el-button>
            <el-button type="primary" @click="saveRole">保存</el-button>
          </span>
        </template>
      </el-dialog>
    </el-card>
  </div>
</template>

<script lang="ts">
export default {
  name: "XUser",
};
</script>

<script lang="ts" setup>
import { ref, onMounted, reactive } from "vue";
import {
  Search,
  InfoFilled,
  Delete,
  Edit,
  Check,
} from "@element-plus/icons-vue";
import { getRolePagedListApi, addSaveroleApi } from "@/Api/acl/role";
import type { RoleItems, RoleItem } from "@/Api/acl/model/roleModel";
//   element-plus  element 类型引入需要在js代码上面  引入  不然会报错
import type { FormInstance, FormRules } from "element-plus";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";

// 这是选择第几页 获取第几页的数据
const currentPage = ref(1);
// 这是分页器一页显示多少条数据
const pageSize = ref(5);
// 这是分页器的总数的定义
const total = ref(0);
// 双向数据绑定获取查询的input框的 v-model 的值
const roleName = ref("");
// table 表达定义的数组
const tableData = ref<RoleItems>([]);

// 定义对话框 的是否显示  默认不显示是false
const UserVisible = ref(false);

// 路由实例
const router = useRouter();

/****************** 添加角色按钮 功能对话框  和 对话框中的form 表单的代码 开始 *******************/
// 声明收集form表单的对象
const ruleFormRef = ref<FormInstance>();
const roleFormData = reactive({
  roleName: "",
});
const rules = reactive<FormRules>({
  roleName: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
});

const saveRole = async () => {
  await ruleFormRef.value?.validate();
  await addSaveroleApi(roleFormData.roleName);
  DistributeVisible.value = false;
  ElMessage.success("添加角色成功");
  getUserList();
};
/****************** 添加角色按钮 功能对话框  和 对话框中的form 表单的代码 结束 *******************/

// 封装请求User分页列表的 axios 请求
const getUserList = async () => {
  const res = await getRolePagedListApi(
    currentPage.value,
    pageSize.value,
    roleName.value
  );
  total.value = res.total;
  tableData.value = res.items;
};

// 挂载的时候  发送分页数据请求
onMounted(() => {
  getUserList();
});

// 这是每页条数发生改变的时候触发的回调函数  更新每页条数 重新发送请求
const handleSizeChange = () => {
  getUserList();
};
// 这是哪一页发生改变的时候触发的回调函数  更新每页条数 重新发送请求
const handleCurrentChange = () => {
  getUserList();
};

// 查询按钮的的回调函数
const QueryRole = () => {
  getUserList();
};

// 角色管理的 对话框的显示与隐藏
const DistributeVisible = ref(false);

// 角色管理的  添加角色按钮
const addRole = () => {
  ruleFormRef.value?.clearValidate();
  DistributeVisible.value = true;
};

const goRoleAuth = (row: RoleItem) => {
  // console.log(row);
  router.push({
    name: "RoleAuth",
    query: { id: row.id, roleName: row.roleName },
  });
};

// 保存添加角色的回调函数

/******************  分配页面 结束  ****************** */
</script>

<style scoped>
.User-table {
  margin: 20px 0;
}
.RoleName {
  display: block;
}
</style>
